<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout::common_head(~{::title}, ~{::supplement})">
	<meta charset="UTF-8">
	<title>业务详情</title>
	<script src="../static/js/jquery-3.2.1.min.js" th:src="@{js/jquery-3.2.1.min.js}"></script>
	<script src="../static/js/semantic.js" th:src="@{js/semantic.js}"></script>
	<link rel="stylesheet" href="../static/css/semantic.css" th:href="@{/css/semantic.css}"/>
	<link rel="stylesheet" href="../static/css/icon.css" th:href="@{css/icon.css}"/>
	<link href="../static/css/ionicons.min.css" rel="stylesheet" th:href="@{css/ionicons.min.css}"/>
	<link href="../static/css/main.css" rel="stylesheet" th:href="@{css/main.css}"/>
	<link href="../static/css/pace.css" rel="stylesheet" th:href="@{css/pace.css}"/>
	<link href="../static/css/lobibox.css" rel="stylesheet" th:href="@{css/lobibox.css}"/>

	<th:block th:fragment="supplement">
		<script th:src="@{js/g6.js}"></script>
		<script src="../static/js/echarts.min.js" th:src="@{js/echarts.min.js}"></script>
		<script src="../static/js/notifications.js" th:src="@{js/notifications.js}"></script>
		<!--<script src="http://rapapi.org/rap.plugin.js?projectId=19544&mode=0"></script>-->
		<style type="text/css">
			/*原生button 有个下外边距*/
			.ui.modal .actions > .button {
				margin-bottom: 0;
			}
			#pointDetailModal {
				background-color: rgba(255,255,255,.6);
			}
			.text-hidden{
				overflow: hidden; /*自动隐藏文字*/
				text-overflow: ellipsis;/*文字隐藏后添加省略号*/
				white-space: nowrap;/*强制不换行*/
			}
			.ui.tab.fixedHeight{ height: 500px; }
			.chartBar{ height: 140px; }
			.row1Height{ height: 160px; }
			.row2Height{
				height: 310px;
				width: 100%;
				overflow:auto;
				overflow-x:hidden
			}
			.row2_3Height{
				min-height: 310px;
				width: 100%;
			}
			.row3Height{  height: 240px;  }
			.row4Height{
				height: 206px;
				width: 100%;
				overflow:auto;
				overflow-x:hidden
			}
			.chart-style{  height: 160px;
				width: 350px; }
			.chart-zoom{
				height: 180px;
				width: 700px;
			}
			#itemZoom {
				height: 200px;
				width: 100%;
			}
			#tableZoom {
				height: 200px;
				width: 100%;
				overflow:auto;
				overflow-x:hidden
			}
			.ui.styled.fluid.accordion.report{
				height: 485px;
				width: 100%;
				overflow:auto;
				overflow-x:hidden
			}
            .customNode2 {
                padding: 0;
                margin: 0;
                width: auto;
                height: auto;
            }
			#pointDetailModal .ui.tab.segment {
				height: 450px;
				width: 100%;
				overflow:auto;
				overflow-x:hidden;
				/*原生tab 有个下边距*/
				margin-bottom: 0px;
			}
			#pointDetailModal .ui.buttons {
				/*原生buttons 有个下边距*/
				margin-bottom: 0px;
			}
			#pointDetailModal table.dataTable.no-footer {
				/*原生dataTable 下外边框颜色是#111*/
				border-bottom: 1px solid #DDDDDD;
			}
			#pointDetailModal .ui.three.column.grid {
				margin: -20px 0 0 0;
			}
			#pointDetailModal .ui.three.column.grid .column {
				margin-bottom: 10px;
			}
		</style>
	</th:block>
</head>
<body>
<!--header start-->
<div id="contextWrap">
	<!--sidebar-->
	<div class="ui sidebar vertical left menu overlay  borderless visible sidemenu inverted  grey" data-color="grey"
		 th:replace="layout::left_menu">
		<a class="item logo" href="index.html">
			<img src="../static/images/logo.png" alt="stagblogo"/><img src="../static/images/thumblogo.png"
																	   alt="stagblogo" class="displaynone"/>
		</a>
		<div class="ui accordion inverted">
			<div class="title item">
                <i class="ion-speedometer titleIcon icon"></i>仪表盘
			</div>
			<div class="content">
				<a class="item" href="#" th:href="@{/dashboard}">仪表盘</a>
			</div>
			<div class="title item" href="#">
				<i class="ion-ios-world titleIcon  icon"></i>业务概览
			</div>
			<div class="content">
			</div>
			<div class="title item">
				<i class="ion-mouse titleIcon icon"></i>设备监控<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="#" th:href="@{/overview}">设备总览</a>
				<a class="item" href="#">设备详情</a>
			</div>
			<div class="title item" href="#">
				<i class="ion-arrow-graph-up-right titleIcon icon"></i>视图展示
			</div>
			<div class="content">
			</div>
			<div class="title item">
				<i class="ion-paintbrush titleIcon icon"></i>告警展示<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="#">告警日历</a>
				<a class="item" href="#">告警列表</a>
			</div>
			<div class="title item" href="#">
				<i class="ion-briefcase titleIcon icon"></i>报表统计
			</div>
			<div class="content">
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>仪表盘1</span>
			<i class="ion-speedometer icon"></i>
			<div class="menu">
				<div class="header">
					仪表盘1
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>业务概览</span>
			<i class="ion-ios-world icon"></i>
			<div class="menu">
				<div class="header">
					业务概览
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>设备监控</span>
			<i class="ion-mouse icon"></i>
			<div class="menu">
				<div class="header">
					设备监控
				</div>
				<div class="ui divider"></div>
				<a class="item" href="tab.html">设备总览</a>
				<a class="item" href="table.html">设备详情</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>视图展示</span>
			<i class="ion-arrow-graph-up-right icon"></i>
			<div class="menu">
				<div class="header">
					视图展示
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>告警展示</span>
			<i class="ion-paintbrush icon"></i>
			<div class="menu">
				<div class="header">
					告警展示
				</div>
				<div class="ui divider"></div>
				<a class="item" href="error.html">告警日历</a>
				<a class="item" href="error.html">告警列表</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>报表统计</span>
			<a href="error.html">
				<i class="ion-briefcase icon"></i>
			</a>
		</div>

		<div class="ui divider"></div>

	</div>

	<!--sidebar-->

	<div class="pusher">
		<!--navbar-->
		<div class="navslide navwrap" th:replace="layout::top_nav">
			<div class="ui menu icon borderless grid" data-color="inverted white">
				<a class="item labeled openbtn">
					<i class="ion-navicon-round big icon"></i>
				</a>
				<div class="item ui colhidden">
					<div class="ui icon input">
						<input type="text" placeholder="Search...">
						<i class="search icon"></i>
					</div>
				</div>
				<div class="right menu colhidden">
					<div class="ui dropdown item labeled icon">
						<i class="bell icon"></i>   告警
						<div class="ui red label mini circular">6</div>
						<div class="menu" >
							<div class="header">
								紧急告警
							</div>
							<div class="item">
								告警信息1……
								<div class="ui teal left pointing label">1</div>
							</div>
							<div class="item">
								告警信息2……
								<div class="ui label">51</div>
							</div>
							<div class="item">
								告警信息3……
								<div class="ui label">1</div>
							</div>
							<div class="header">
								严重告警
							</div>
							<div class="item">
								<i class="dropdown icon"></i>
								<span class="text">更多</span>
								<div class="menu">
									<div class="item">告警信息……</div>
									<div class="item">告警信息……</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ui dropdown item">
                        <img class="ui mini circular image" src="../static/images/0.jpg" th:src="@{images/0.jpg}"
                             alt="label-image"/>
						<div class="menu">
							<a class="item" href="#" th:text="${session.userInfo.name}">whstone</a>
							<a class="item" href="mail.html" th:href="@{/logout}">注销</a>
						</div>
					</div>
					<a class="item labeled rightsidebar computer only">
						<i class="ion-wrench large icon"></i>工具
					</a>

				</div>
			</div>
		</div>
		<!--navbar-->
		<!--maincontent-->
		<div class="mainWrap navslide">
			<div class="ui equal width left aligned padded grid stackable">
				<!--Site Content-->
				<div class="sixteen wide column">
					<div class="ui grid">
						<div class="eight wide column">
							<div class="header item">
								<h2><i class="large newspaper icon"></i>业务详情</h2>
							</div>
						</div>

						<div class="eight wide column right aligned">
							<div id="platform_select" class="ui selection dropdown">
								<!--<input type="hidden" name="hosts">-->
								<i class="dropdown icon"></i>
								<div class="text"></div>
								<div class="menu"  id="platform_menu">

								</div>
							</div>
						</div>
					</div>
					<div class="ui secondary pointing menu"  style="margin-top: -10px">
						<a class="active item" data-tab="platformDetail">业务概述</a>
						<a class="item" data-tab="platformTree">业务树</a>
						<a class="item" data-tab="platformReport">业务图形报告</a>
						<!--<div class="right menu">
							<select id="platform_select" class="ui mini dropdown ">
							</select>
						</div>-->
					</div>
					<div class="ui active tab fixedHeight no-padding" data-tab="platformDetail">
						<div class="sixteen wide column">
							<div class="ui grid">
								<div class="six wide column">
									<div class="ui segment center aligned row1Height">
										<h2 class="ui left aligned header">健康度</h2>
										<div class="ui huge statistic" id="healthStatistic">
											<div class="value">
												<span id="health_value" class="counter"></span> %
											</div>
										</div>
									</div>
									<!-- 查询读条 -->
									<div id="health-dimmer" class="ui inverted dimmer active">
										<div class="ui text loader" style="text-align:center">正在加载</div>
									</div>
								</div>
								<div class="ten wide column" style="padding-left: 0px;">
									<div class="ui segment left aligned row1Height">
										<div id="platform_graph" class="chartBar"></div>
									</div>
									<!-- 查询读条 -->
									<div id="state-dimmer" class="ui inverted dimmer active">
										<div class="ui text loader" style="text-align:center">正在加载</div>
									</div>
								</div>
								<div class="sixteen wide column" style="padding-top: 0px;">
									<div  class="ui segment">
										<div class="ui grid">
											<div class="three wide column no-padding" style="">
												<div class="ui fluid vertical menu row2Height" id="hostsMenu" style="">
												</div>
												<!-- 查询读条 -->
												<div id="host-dimmer" class="ui inverted dimmer active">
													<div class="ui text loader" style="text-align:center">正在加载</div>
												</div>
											</div>
											<div class="three wide column no-padding">
												<div class="ui fluid vertical menu row2Height" id="pointsMenu">
												</div>
												<!-- 查询读条 -->
												<div id="point-dimmer" class="ui inverted dimmer active">
													<div class="ui text loader" style="text-align:center">正在加载</div>
												</div>
											</div>
											<div class="ten wide column no-padding">
												<div class="ui row2Height"  id="itemsMenu">
												<table class="ui fixed single line compact table row2_3Height center aligned">
													<thead>
													<tr>
														<th width="35%" class="left aligned">名称</th>
														<th width="25%" class="left aligned">值</th>
														<th width="10%">状态</th>
														<th width="10%">权值</th>
														<th width="20%">最新时间<a  href="javascript:void(0);" style="float: right"><i class='browser icon'></i>详情</a></th>
													</tr>
													</thead>
													<tbody id="itemsTable">
														<td colspan="6"> 无数据</td>
													</tbody>
												</table>
												</div>
												<!-- 查询读条 -->
												<div id="item-dimmer" class="ui inverted dimmer active">
													<div class="ui text loader" style="text-align:center">正在加载</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ui tab fixedHeight no-padding" data-tab="platformTree">
						<div class="row">
							<div class="ui grid">
								<div class="sixteen wide column">
									<div class="ui segment">
										<div id="tree_area"  class="sixteen wide column row3Height"></div>
										<!-- 查询读条 -->
										<div id="tree-dimmer" class="ui inverted dimmer active">
											<div class="ui text loader" style="text-align:center">正在加载</div>
										</div>
									</div>
								</div>
								<div class="sixteen wide column" style="padding-top: 0px;">
									<div class="ui segment row4Height">
										<h3><span id="host_name"></span>监控点</h3>
										<div class="ui six column grid" id="pointButton">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ui tab fixedHeight no-padding report" data-tab="platformReport">
						<div class="ui styled fluid accordion report" id="hostAccordion">
						</div>
						<div class='ui inverted dimmer active' id='platform-dimmer'>
							<div class='ui text loader'>正在加载</div>
						</div>
					</div>
				</div>
				<!--放大监控项图形弹出框-->
				<div th:fragment="item_detail_page" class="ui small coupled modal" id="zoomModal">
					<i class="close icon" onclick="zoom_close()"></i>
					<div class="header">
						监控项详情
					</div>
					<div class="image content" style="height: 450px;">
						<div class="ui grid">
							<div class="sixteen wide column" id="itemZoom"></div>
							<div class="sixteen wide column no-padding" >
								<h3>
									<i class="tag icon"></i>
									历史数据
								</h3>
								<div  id="tableZoom">
									<table
										   class="ui compact celled table center aligned " width="100%">
										<thead>
										<tr>
											<th class="four wide">时间</th>
											<th class="four wide">数值</th>
										</tr></thead>
										<tbody id="itemHistory"></tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--监控点详情弹出框-->
				<div  th:replace="hostdetail::point_detail_page"></div>
				<!--图形报告弹出框-->
				<div  th:replace="hostdetail::graph_conf_page"></div>
				<!--删除弹出框-->
				<div  th:replace="monitorview::delete_page"></div>
			</div>
				<!--modal end-->
				<!--Site Content-->
		</div>
	</div>
		<!--maincontent-->
</div>

<th:block th:replace="layout::bottom_script(~{::supple})">
	<script src="../static/js/js.cookie.js" th:src="@{js/js.cookie.js}"></script>
	<script src="../static/js/jquery.nicescroll.min.js" th:src="@{js/jquery.nicescroll.min.js}"></script>
	<script data-pace-options='{ "ajax": false }' src="../static/js/pace.js" th:src="@{js/pace.js}"></script>
	<script src="../static/js/main.js" th:src="@{js/main.js}"></script>
	<th:block th:fragment="supple">

		<script src="../static/js/jquery.dataTables.js" th:src="@{js/jquery.dataTables.js}"></script>
		<script src="../static/js/custom-datatable.js" th:src="@{js/custom-datatable.js}"></script>
		<script src="../static/js/custom/pointModal.js" th:src="@{js/pointModal.js}"></script>
		<script src="../static/js/assistantTool.js" th:src="@{js/assistantTool.js}"></script>
		<script src="../static/js/custom/item-modal.js" th:src="@{js/custom/item-modal.js}"></script>
		<script type="text/javascript">

			var platform_id ;
            var host_ids;

            //初始化业务平台下拉框
            selectPlaltform();

            //业务平台下拉框onchange
            $("#platform_select").dropdown({
                onChange : function(value,text, $choice){

                    platform_id = value;
					//加载健康度和图形数据
					getPlatDates(platform_id);
					//加载分类菜单数据 诠释权值含义
					initWeightMenu(platform_id);
                    //加载业务树
                    platformTree(platform_id);
                    //加载业务图形报告
                    hostAccordion(platform_id);

            	}
            });

            //初始折叠菜单
            $('#hostAccordion').accordion({
                exclusive:false,
                selector: {
                    trigger: '.trigger_icon'
                }
            });

            //初始化选项页
            $('.secondary.pointing.menu .item')
                .tab({
                    'onFirstLoad': function (path) {
                        /*if (path === 'platformTree') {
                            //加载业务树
                            platformTree(platform_id);

                        }
                        if (path === 'platformReport') {
                            //加载业务图形报告
                            hostAccordion(platform_id);

                        }*/
                    }
                });

			//加载 业务平台 下拉框
			function selectPlaltform() {
                $.ajax({
                    type: "get",
                    url: "/platformdetail/get_platforms",
                    dataType: "json",
                    success: function (result) {
                        if(result.success) {
                            var platform_data=result.data;
                            var str = "";
                            for(var i=0;i<platform_data.length;i++)
                            {
                                str +="<div class='item' data-value='"+platform_data[i].platform_id+"'  >"+platform_data[i].platform_name+"</div> ";

                            }

                            $("#platform_menu").html(str);
                            var hashCode = location.hash;
                            //console.log('hashCode',hashCode);
                            if(hashCode === '') {
                                $("#platform_select").dropdown("set value", platform_data[0].platform_id);
                                $("#platform_select").dropdown("set text", platform_data[0].platform_name);
							}else {
                                $("#platform_select").dropdown("set value", hashCode.substr(1).split('_')[0]);
                                $("#platform_select").dropdown("set text", hashCode.substr(1).split('_')[1]);
                                //window.location.href = window.location.href.split('#')[0];
							}

							platform_id = $("#platform_select").dropdown('get value');

                            //加载健康度和图形数据
                            getPlatDates(platform_id);
                            //加载分类菜单数据 诠释权值含义
                            initWeightMenu(platform_id);

                        }
                        else {
                            errorMsg_no_data("业务平台 Dropdown");
                        }
                    },
                    error: function () {
                        errorMsg_no_connect("业务平台 Dropdown");
                    }
                });
			}

            //加载健康度和图形数据
			function getPlatDates(platform_id) {
                //var platform_id = $("#platform_select").dropdown("get value")[0].split(",")[0];
                $.ajax({
                    type: "get",
                    url: "/platformdetail/get_datas?platform_id="+platform_id,
                    dataType: "json",
                    success: function (result) {
                        if(result.success) {
                            var platform_data = result.data;
                            var health = platform_data.health.toFixed(2);
							$("#health_value").text(health);
                            $('#health-dimmer').removeClass('active');
							if(0 <= health <= 60){var colorStatistic = "ui huge red statistic";}
                            else if(60 < health <= 80){var colorStatistic = "ui huge yellow  statistic";}
                            else if(80 < health <= 100){var colorStatistic = "ui huge green  statistic";}
                            $("#healthStatistic").removeClass();
                            $("#healthStatistic").addClass(colorStatistic);
                            //绘制图标数据
                            var platform_chart = echarts.init(document.getElementById("platform_graph"));
                            //配置option
                            var option = {
                                title: {
                                    show:true,
                                    text: '',
                                    top:'-5px'
                                },
                                tooltip : {
                                    trigger: 'axis',
                                    axisPointer : {
                                        type : false
                                    }
                                },
                                legend: {
                                    orient: 'vertical',
                                    x: 'right',
                                    y: 'center',
                                    data:['严重','警告','正常','其他']
                                },
                                grid: {
                                    left: '2%',
                                    right: '10%',
                                    bottom: '0%',
                                    top:'3%',
                                    containLabel: true
                                },
                                xAxis:  {
                                    type: 'category',
                                    data: platform_data.types
                                },
                                yAxis: {
                                    type: 'value',
                                    splitLine:{show: false},
                                    minInterval : 1
                                },
                                series: [
                                    {
                                        name: '正常',
                                        type: 'bar',
                                        stack: '设备总数',
                                        barWidth : 25,
                                        data: platform_data.data[0],
                                        color: ['#5FB878']
                                    },
                                    {
                                        name: '警告',
                                        type: 'bar',
                                        stack: '设备总数',
                                        barWidth : 25,
                                        data: platform_data.data[1],
                                        color: ['#F7B824']
                                    },
                                    {
                                        name: '严重',
                                        type: 'bar',
                                        stack: '设备总数',
                                        barWidth : 25,
                                        data: platform_data.data[2],
                                        color: ['#DB2828']
                                    }
                                ]
                            };
                            //根据配置绘制图形
                            platform_chart.setOption(option);
                            $('#state-dimmer').removeClass('active');
                        }
                        else {
                            errorMsg_no_data("业务平台基础数据获取 失败");
                        }
                    },
                    error: function () {
                        errorMsg_no_connect("服务器连接 失败");
                    }
                });
			}

            //加载分类菜单数据 诠释权值含义
			function initWeightMenu(platform_id) {

                //加载设备列表
                hostsMenu(platform_id);

			}
			//加载设备列表
            function hostsMenu(platform_id) {
                $.ajax({
                    type: "get",
                    url: "/platformdetail/get_hosts?platform_id="+platform_id,
                    dataType: "json",
                    success: function (result) {
                        if(result.success) {
                            var data = result.data;
                            gethostsMenu(data);
                            $('#host-dimmer').removeClass('active');
                            //加载监控点列表
                            var host_id = $("#hostsMenu").children(".item.text-hidden.active").attr("id");
                            pointsMenu(host_id);
                            $('#hostsMenu a').on('click',function () {
                                $('#hostsMenu a').removeClass('active');
                                $(this).addClass('active');
                                pointsMenu(this.id);
                            })
                        }
                        else {
                            errorMsg_no_data("设备列表 Menu");
                        }
                    },
                    error: function () {
                        errorMsg_no_connect("设备列表 Menu");
                    }
                })
            }
            function gethostsMenu(data) {
                var str = '';
                for(var i=0;i<data.length;i++)
                {
                    if(data[i].state == '正常'){
                        var state = 'green';
                    }
                    else if(data[i].state == '警告'){
                        var state = 'yellow';
                    }
                    else if(data[i].state == '严重'){
                        var state = 'red';
                    }
                    if (i==0){
                        str += "<a class='item text-hidden active' id='"+data[i].host_id+"'";
                    }else {
                        str += "<a class='item text-hidden' id='"+data[i].host_id+"'";
                    }
                    if(strlen(data[i].host_name) > 20)
                    {
                        str += " title='"+data[i].host_name+"'>"+data[i].host_name+"<i class='"+state+" desktop icon'></i></a> ";
                    }else{
                        str += ">"+data[i].host_name+"<i class='"+state+" desktop icon'></i></a> ";
                    }
                }
                $("#hostsMenu").html(str);
            }

            //加载监控点列表
            function pointsMenu(host_id) {
                $.ajax({
                    type: "get",
                    url: "/platformdetail/get_points?host_id="+host_id,
                    dataType: "json",
                    success: function (result) {
                        if(result.success) {
                            var data = result.data;
                            getpointsMenu(data);
                            $('#point-dimmer').removeClass('active');
                            //加载监控项列表
                            var point_id = $("#pointsMenu").children(".item.text-hidden.active").attr("id");
                            itemsMenu(point_id);
                            //itemsMenu(data[0].point_id);
                            $('#pointsMenu a').on('click',function () {
                                $('#pointsMenu a').removeClass('active');
                                $(this).addClass('active');
                                itemsMenu(this.id);
                            })
                        }
                        else {
                            errorMsg_no_data("监控点列表 Menu");
                        }
                    },
                    error: function () {
                        errorMsg_no_connect("监控点列表 Menu");
                    }
                })
            }
            function getpointsMenu(data) {
                var str = '';
                for(var i=0;i<data.length;i++)
                {
                    if(data[i].state == '正常'){
                        var state = 'green';
                    }
                    else if(data[i].state == '警告'){
                        var state = 'yellow';
                    }
                    else if(data[i].state == '严重'){
                        var state = 'red';
                    }
                    if (i==0){
                        str += "<a class='item text-hidden active' id='"+data[i].point_id+"'";
                    }else {
                        str += "<a class='item text-hidden' id='"+data[i].point_id+"'";
                    }
                    if(strlen(data[i].point_name) > 20)
                    {
                        str += " title='"+data[i].point_name+"'>"+data[i].point_name+"<i class='"+state+" circle icon'></i></a> ";
                    }else{
                        str += ">"+data[i].point_name+"<i class='"+state+" circle icon'></i></a> ";
                    }
                }
                $("#pointsMenu").html(str);
            }

            //加载监控项列表
            function itemsMenu(point_id) {
                $.ajax({
                    type: "get",
                    url: "/platformdetail/get_items?point_id="+point_id,
                    dataType: "json",
                    success: function (result) {
                        if(result.success) {
                            var data = result.data;
                            if (data!=''){
                                getitemsMenu(data);
							}else {
                                $("#itemsTable").html("<td colspan='6'> 无数据</td>");
							}
                            $('#item-dimmer').removeClass('active');
                        }
                        else {
                            errorMsg_no_data("监控项列表 Menu");
                        }
                    },
                    error: function () {
                        errorMsg_no_connect("监控项列表 Menu");
                    }
                })
            }
            function getitemsMenu(data) {
                var str = '';
                var str_item_name = '';
                var str_value = '';
                for(var i=0;i<data.length;i++)
                {
                    if(data[i].state == '正常'){
                        var state = '<i class="green square icon"></i>';
                    }
                    else if(data[i].state == '警告'){
                        var state = '<i class="yellow square icon"></i>';
                    }
                    else if(data[i].state == '严重'){
                        var state = '<i class="red square icon" ></i>';
                    }
                    //判断超出字符长度，浮动显示
                    str_item_name = "<td class='left aligned' title='"+data[i].item_name +"'>" +data[i].item_name +"</td>";
                    str_value = "<td class='left aligned' title='"+data[i].value +"'> " +data[i].value+"</td>";
                    /*if (strlen(data[i].item_name) > 40) {
                        str_item_name = "<td class='left aligned' title='"+data[i].item_name +"'>" +data[i].item_name +"</td>";
					}else {
                        str_item_name = "<td class='left aligned'>" +data[i].item_name +"</td>";
					}
                    if (strlen(data[i].value) > 40) {
                        str_value = "<td class='left aligned' title='"+data[i].value +"'> " +data[i].value+"</td>";
                    }else {
                        str_value = "<td class='left aligned'> " +data[i].value+"</td>";
					}*/
                    str +="<tr id='"+data[i].item_id+"' >"
						+ str_item_name
						+str_value
						+ "<td title='"+data[i].state +"'> "
                        +state+"</td><td> "
                        +data[i].weight+"</td>" +
						"<td>" + data[i].last_time + "</td>" +
						"<td></td></tr> ";
                }
                $("#itemsTable").html(str);

                //绑定 详情事件
				$('#itemsMenu').find('a').on('click',function(){
                    var point_id = $('#pointsMenu .active').attr('id');
                    getItemsDetail(point_id);
				});
            }

			//加载业务树方法
			function platformTree(platform_id) {
				$.ajax({
					type: "get",
					url: "/platformtree/get_tree?platform_id="+platform_id,
					dataType: "json",
					success: function (result) {
						if(result.success) {
							var tree_data = result.data;
							getplatformTree(tree_data);
						}
						else {
							errorMsg_no_data("业务树 Tree");
						}
					},
					error: function () {
						errorMsg_no_connect("业务树 Tree");
					}
				})
			}
			function getplatformTree(tree_data){
				$("#tree_area").html("");
                //自定义线
                function afterDrawEdge(cfg, group, keyShape){
                    return keyShape;
                };
                //自定义注册节点画板 整个节点
                function drawCard(cfg, group){
                    //console.log("cfg",cfg);
                    var model = cfg.model;
                    var x = 100 ;
                    var y = 100 ;
                    var width = 120;
                    var height = 150;
                    var upRectHeight = 100;
                    var padding = 10;
                    var keyShape;
                    //整个点画板
                    keyShape = group.addShape('rect', {
                        attrs: {
                            x: x,
                            y: y,
                            width: width,
                            height: height,
                            stroke:'white',
                            fill: 'white'
                        }
                    });
                    //标题名称
                    group.addShape('text', {
                        attrs: {
                            x: x,
                            y: y + upRectHeight + padding,
                            width: width,
                            height:height - upRectHeight - padding,
                            text: model.label,
                            fontSize:'25',
                            textBaseline: 'top',
                            textAlign: 'left',
                            fill: 'black'
                        }
                    });
                    // 图片
                    group.addShape('image', {
                        attrs: {
                            x: x,
                            y: y,
                            width: width,
                            height:upRectHeight,
                            //img:cfg.url + cfg.state
                            img:model.url + model.type + '-' + model.state + '.png'
                        }
                    });
                    return keyShape;
                }
                //注册节点
                G6.registNode('customNode', {
                    draw: function(cfg, group){
                        return drawCard(cfg, group);
                    }
                });
                //注册线
                G6.registEdge('customLine', {
                    afterDraw: function(cfg , group, keyShape){
                        return afterDrawEdge(cfg, group, keyShape);
                    }
                }, 'smooth');
                //初始化
                var tree = new G6.Tree({
                    id: 'tree_area',
                    width: 1100,
                    height: 240 ,
                    fitView: 'autoZoom',
                    layoutCfg: {
                        direction: 'TB',
                        getHGap: function(/* d */) {
                            return 100;
                        },
                        getVGap: function(/* d */) {
                            return 50;
                        },
                    },
                });
                tree.source(tree_data);
                tree.node()
                    .style({
                        fillOpacity: 1
                    })
                    .shape('customNode');
                tree.edge().shape('smooth');
                tree.render();
                $('#tree-dimmer').removeClass('active');
				tree.on('dblclick', function(ev){
					if (ev.item.get('model').type == "host"){
                        //写主机名称
                        var host_name = ev.item.get('model').label;
                        $("#host_name").text(host_name + " : ");
                        pointButton(ev.item.get('model').id);
					}
				});
			}

			function pointButton(host_id) {
				$.ajax({
					type: "get",
					url: "/platformdetail/get_points?host_id="+host_id,
					dataType: "json",
					success: function (result) {
						if(result.success) {
							var data = result.data;
							getpointButton(data);
						}
						else {
							errorMsg_no_data("监控点按钮 Button");
						}
					},
					error: function () {
						errorMsg_no_connect("监控点按钮 Button");
					}
				})
			}
			function getpointButton(data) {
				var str = '';
				for(var i=0;i<data.length;i++)
				{
					if(data[i].state == '正常'){
						var state = 'ui green top attached button';
					}
					if(data[i].state == '警告'){
						var state = 'ui yellow top attached button';
					}
					if(data[i].state == '严重'){
						var state = 'ui red top attached button';
					}
					str +="<div class='column'><div class='"+state+"' id='p"+data[i].point_id+"' >"+data[i].point_name+"</div> </div>";
				}
				$("#pointButton").html(str);
			}

            //加载业务图形报告
            function hostAccordion(platform_id) {
                $.ajax({
                    type: "get",
                    url: "/platformdetail/get_hosts?platform_id="+platform_id,
                    dataType: "json",
                    success: function (result) {
                        if(result.success) {
                            var host_data = result.data;
                            gethostAccordion(host_data);
                        }
                        else {
                            errorMsg_no_data("图形报告 Accordion");
                        }
                    },
                    error: function () {
                        errorMsg_no_connect("图形报告 Accordion");
                    }
                })
            }
            function gethostAccordion(data) {
                var str = '';
                host_ids = new Array();
                for(var i=0;i<data.length;i++)
                {
                    str += "<div class='active title'>" +
								 "<a class='header item addItems' id='i"+ data[i].host_id +"' style='float:right;' >" +
									"<i class='add icon'> </i>添加" +
								 "</a>" +
								 "<div class='trigger_icon'><i class='dropdown icon'></i>"+data[i].host_name+"</div>" +
						    "</div>" +
						    "<div class='active content'>" +
								"<div  id='g"+data[i].host_id+"' class='ui three column grid'></div>" +
							"</div>";
                    host_ids.push(data[i].host_id);
                }
                $("#hostAccordion").html('');
                $("#hostAccordion").html(str);
                //给添加绑定事件
                $("#hostAccordion").find('.addItems').on('click',function() {
                    add_graphs(this.id);
				});

                //获取图形
                getitemsAccordion(host_ids);
            }
            //获取并绘制业务平台图形数据
            function getitemsAccordion(host_ids) {
			    console.log('host_ids',host_ids);
                $.ajax({
                    type: "post",
                    url:"/platformdetail/get_graphs",
					data:{"host_ids":host_ids},
                    traditional: true,
                    dataType: "json",
                    success: function (result) {
                        if(result.success) {
                            var graph_data = result.data;
                            console.log('graph_data',graph_data);
                            $.each(host_ids,function(n,value) {
                                $("#g"+value).html('');
                            });
                            //循环绘制图形
                            for(var i=0;i<graph_data.length;i++) {
                                var title = "";
                                if(graph_data[i].units == "") {
                                    title = graph_data[i].graph_name;
                                }else {
                                    title =graph_data[i].graph_name + "(" + graph_data[i].units +")";
                                }
                                //append 图形定位
                                var id = "g" + graph_data[i].item_id;
                                var str_graph ="<div class='column'><div class='ui grid'>"+
                                    "<div class='eight wide column'>"+
                                    "<h3>"+title+"</h3></div>"+
                                    "<div class='eight wide column right aligned'>"+
                                    "<i class='zoom icon' id='z" + graph_data[i].item_id +"' onclick='zoom_graph(this.id)'></i>"+
                                    "<i class='edit icon' id='e" + graph_data[i].item_id + "' onclick='edit_graph(this.id)'></i>"+
                                    "<i class='delete icon' id='d" + graph_data[i].item_id + "' data-name='"+title+"' onclick='delete_graph(this.id)'></i></div>"+
                                    "<div class='sixteen wide column'>"+
                                    "<div id='"+id+"' class='chart-style'>"+id+"</div></div></div></div>";
                                $("#g"+graph_data[i].host_id).append(str_graph);
                                var myChart = echarts.init(document.getElementById(id));
                                var Color = ['#5FB878', '#DB2828', '#F7B824', '#d2d2d2', '#2F4056'];
                                if (graph_data[i].state == "正常"){ var myColor = Color[0] }
                                if (graph_data[i].state == "严重"){ var myColor = Color[1] }
                                if (graph_data[i].state == "警告"){ var myColor = Color[2] }
                                var colorGreen = [0.6, '#5FB878'];
                                var colorYellow = [0.8, '#F7B824'];
                                var colorRed = [1, '#FF5722'];
                                if(graph_data[i].units == "%"){
                                    var ymax = 100;
                                }else {
                                    var ymax = null;
                                }
                                //图形值
                                var option ;
                                switch (graph_data[i].graph_type) {
                                    case "gauge":
                                        option = {
                                            title: {},
                                            tooltip: {
                                                formatter: "{a} <br/>{b} : {c}%"
                                            },
                                            series: [
                                                {
                                                    name: graph_data[i].item_name,
                                                    type: 'gauge',
                                                    min: 0,
                                                    max: 100,
                                                    splitNumber: 5,
                                                    axisLine: {            // 坐标轴线
                                                        lineStyle: {       // 属性lineStyle控制线条样式
                                                            color: [colorGreen, colorYellow, colorRed],
                                                            width: 13
                                                        }
                                                    },
                                                    axisTick: {            // 坐标轴小标记
                                                        length: 18,        // 属性length控制线长
                                                        lineStyle: {       // 属性lineStyle控制线条样式
                                                            color: 'auto'
                                                        }
                                                    },
                                                    splitLine: {           // 分隔线
                                                        length: 22,         // 属性length控制线长
                                                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                                            color: 'auto'
                                                        }
                                                    },
                                                    pointer: {
                                                        width: 5
                                                    },
                                                    detail: {
                                                        formatter: '{value}%',
                                                        offsetCenter: [0, '60%'],
                                                        textStyle: {
                                                            fontWeight: 'bolder', fontSize: 16, color: '#333',
                                                        }
                                                    },
                                                    data: [{
                                                        value: graph_data[i].datas.length === 0 ? 0 : graph_data[i].datas[graph_data[i].datas.length - 1].toFixed(2),
                                                        name: ''
                                                    }]

                                                }
                                            ]
                                        };
                                        break;
                                    case "area":
                                        option = {
                                            title: {
                                                text: '',
                                            },
                                            tooltip: {
                                                trigger: 'axis',
                                                position: function (pt) {
                                                    return [pt[0], '10%'];
                                                }
                                            },
                                            legend: {
                                                data: []
                                            },
                                            grid: {
                                                left: '2%',
                                                right: '2%',
                                                bottom: '2%',
                                                top: '5%',
                                                containLabel: true
                                            },
                                            xAxis: {
                                                data: graph_data[i].data_time
                                            },
                                            yAxis: {
                                                max: ymax,
                                            },
                                            series: [{
                                                name: graph_data[i].item_name,
                                                type: 'line',
                                                data: graph_data[i].datas,
                                                areaStyle: {
                                                    normal: {}
                                                },
                                                color: [myColor]
                                            }]
                                        };
                                        break;
                                    default:
                                        option = {
                                            title: {
                                                text: '',
                                            },
                                            tooltip: {
                                                trigger: 'axis',
                                                position: function (pt) {
                                                    return [pt[0], '10%'];
                                                }
                                            },
                                            legend: {
                                                data: []
                                            },
                                            grid: {
                                                left: '2%',
                                                right: '2%',
                                                bottom: '2%',
                                                top: '5%',
                                                containLabel: true
                                            },
                                            xAxis: {
                                                data: graph_data[i].data_time
                                            },
                                            yAxis: {
                                                max: ymax,
                                                splitLine: {show: false},
                                            },
                                            series: [{
                                                name: graph_data[i].item_name,
                                                type: graph_data[i].graph_type,
                                                data: graph_data[i].datas,
                                                color: [myColor],
                                            }]
                                        };
                                }
                                console.log('option',option);
                                myChart.setOption(option);
                            }
                        }
                        else {
                            errorMsg_no_data("图形报告 Accordion");
                        }
                    },
                    error: function () {
                        errorMsg_no_connect("图形报告 Accordion");
                    }
                }).done(function() {
                    $('#platform-dimmer').removeClass('active');
				});

            }

            //点击添加业务图形报告
            function add_graphs(id) {

                //$('.ui.dropdown').dropdown();

                var host_id = id.substring(1);

                //用于赋值
                var graph_type = '',
                    point_id = '',
                    item_id = '';
                //用于校验
                var success = true;
                var is_name = true,
                    is_point = true,
                    is_item = true,
                    is_type = true;

                $('#graphConfModal').modal({
                    closable  : false,
                    autofocus: false,
					onShow: function() {

                        //初始化 清除样式
                        $('#graphTitle').removeClass('error')
                        $('#graphPoints').removeClass('error')
                        $('#graphItems').removeClass('error')
                        $('#graphType').removeClass('error')

                        $(".dropdown.points.selection").removeClass('disabled');
                        $(".dropdown.items.selection").removeClass('disabled');

                        //清除内容
                        $("#graphName").val('');
                        $(".dropdown.points select").dropdown('clear');
                        $(".dropdown.items select").dropdown('clear');
                        $(".dropdown.type select").dropdown('clear');



                        dropdownPoints(host_id);
						//绑定事件
                        $('#graphName').on('blur',function() {
                            //name 校验
                            if ($('#graphName').val() === '') {
                                $('#graphTitle').addClass('error');
                                is_name = false;
                                //console.log('name empty');
                            }else {
                                $('#graphTitle').removeClass('error');
                                is_name = true;
                                //console.log('name ok');
                            }
                        });

                        $('.dropdown.points').dropdown({
                            onChange: function(value, text, $selectedItem) {
                                $('#graphPoints').find('.text').text(text.substr(0,20));
                                point_id = value;
                                //point 校验
                                if (point_id === '') {
                                    $('#graphPoints').addClass('error');
                                    is_point = false;
                                    //console.log('point empty');
                                }else {
                                    $('#graphPoints').removeClass('error');
                                    is_point = true;
                                    //console.log('point ok');
                                }
                                $(".dropdown.items select").dropdown('clear');
                                dropdownItems(value);
                            }
                        });

                        $('.dropdown.items').dropdown({
                            onChange: function(value, text, $selectedItem) {
                                $('#graphItems').find('.text').text(text.substr(0,20));
                                item_id = value.split("_")[1];
                                //console.log('item_id',item_id);
                                //item 校验
                                if (item_id === '') {
                                    $('#graphItems').addClass('error');
                                    $('#item_label').css('display','none');
                                    is_item = false;
                                    //console.log('item empty');
                                }else if ($("#g" + item_id).length > 0) {
                                    //校验判断 页面上是否已经存在相同监控项的图形了
                                    $('#item_label').css('display','block');
                                    $('#graphItems').addClass('error');
                                    is_item = false;
                                    //console.log('item exist');
                                }else {
                                    $('#graphItems').removeClass('error');
                                    $('#item_label').css('display','none');
                                    is_item = true;
                                    //console.log('item ok');
                                }
                                $(".dropdown.type select").dropdown('clear');
                                dropdownType(value.split("_")[0]);
                            }
                        });

                        $('.dropdown.type').dropdown({
                            onChange: function(value, text, $selectedItem) {
                                graph_type = value;
                                //type 校验
                                if (graph_type === '') {
                                    $('#graphType').addClass('error');
                                    is_type = false;
                                    //console.log('type empty');
                                }else {
                                    $('#graphType').removeClass('error');
                                    is_type = true;
                                    //console.log('type ok',value);
                                }
                                $("#chart_icon").html("<i class='massive "+value+" chart icon'></i>");
                            }
                        });
					},
                    onApprove: function () {
                        //point 校验
                        if (point_id === '') {
                            $('#graphPoints').addClass('error');
                            is_point = false;
                            //console.log('point empty');
                        }else {
                            $('#graphPoints').removeClass('error');
                            is_point = true;
                            //console.log('point ok');
                        }
                        //item 校验
                        if (item_id === '') {
                            $('#graphItems').addClass('error');
                            $('#item_label').css('display','none');
                            is_item = false;
                            //console.log('item empty');
                        }else if ($("#g" + item_id).length > 0) {
                            //校验判断 页面上是否已经存在相同监控项的图形了
                            $('#item_label').css('display','block');
                            $('#graphItems').addClass('error');
                            is_item = false;
                            //console.log('item exist');
                        }else {
                            $('#graphItems').removeClass('error');
                            $('#item_label').css('display','none');
                            is_item = true;
                            //console.log('item ok');
                        }
                        //type 校验
                        if (graph_type === '') {
                            $('#graphType').addClass('error');
                            is_type = false;
                            //console.log('type empty');
                        }else {
                            $('#graphType').removeClass('error');
                            is_type = true;
                            //console.log('type ok');
                        }

                        success = is_name && is_point && is_item && is_type ;
                        //console.log(success);
                        if(success) {
                            $('.button.approve').addClass('loading');
                            var dataInfo = {
                                graphName: $('#graphName').val(),
                                graphType: graph_type,
                                hostId: host_id,
                                itemId: item_id,
								platformId:platform_id
                            };
                            $.ajax({
                                type: "post",
                                url: "/platformdetail/save_graph",
                                data: JSON.stringify(dataInfo),
                                dataType: "json",
                                contentType : 'application/json',
                                success: function (result) {
                                    if(result.success) {
                                        $('.button.approve').removeClass('loading');
                                        //获取图形
                                        getitemsAccordion(host_ids);
                                        return true;
                                    } else {
                                        $('.button.approve').removeClass('loading')
                                        return true;
                                        errorMsg_no_data("保存不成功 Modal");
                                    }
                                },
                                error: function () {
                                    errorMsg_no_connect("监控项 Modal");
                                }
                            });

                        }else {
                            return false;
						}
                    }
                }).modal('show')
			}

            //点击修改图形 function
            function edit_graph(id) {
                var item_id = id.substring(1);

                var graph_name = "",
					item_name = "",
					point_id = "",
					point_name = "",
					graph_type = "",
                    graph_value = "",
					value_type = "";
                //用于校验
                var success = true;
                var is_name = true,
                    is_type = true;

                $('#graphConfModal').modal({
                    closable  : false,
					onShow: function() {
                        $.ajax({
                            type: "get",
                            url: "/platformdetail/get_update?item_id="+item_id,
                            dataType: "json",
                            success: function (result) {
                                if(result.success) {
                                    var graph_data = result.data;
                                    item_name = graph_data.item_name;
                                    point_id = graph_data.point_id;
                                    point_name = graph_data.point_name;
                                    graph_name = graph_data.graph_name;
                                    graph_type = graph_data.graph_type;
                                    graph_value = graph_data.graph_value;
                                    value_type = graph_data.value_type;

                                    dropdownType(value_type);

                                    //初始化
                                    $("#graphName").val(graph_name);
                                    $(".dropdown.points select").dropdown("set value", point_id);
                                    $(".dropdown.points select").dropdown("set text", point_name);
                                    $(".dropdown.items select").dropdown("set value", value_type + "_" + item_id);
                                    $(".dropdown.items select").dropdown("set text", item_name);
                                    $(".dropdown.type select").dropdown("set value", graph_type);
                                    $(".dropdown.type select").dropdown("set text", graph_value);

                                    $(".dropdown.points.selection").addClass('disabled');
                                    $(".dropdown.items.selection").addClass('disabled');

                                    $(".dropdown.type").dropdown({
                                            onChange: function(value, text, $selectedItem) {
                                                graph_type = value;
                                                if (graph_type === '') {
                                                    $('#graphType').addClass('error');
                                                    is_type = false;
                                                    //console.log('type empty');
                                                }else {
                                                    $('#graphType').removeClass('error');
                                                    is_type = true;
                                                    //console.log('type ok');
                                                }
                                                $("#chart_icon").html("<i class='massive "+value+" chart icon'></i>");
                                            }
                                        });

                                    $('#graphName').on('blur',function() {
                                        //("提交后校验item:" + $("#i"+ item_id).length);
                                        if ($('#graphName').val() === '') {
                                            $('#graphTitle').addClass('error');
                                            is_name = false;
                                            //console.log('name empty');
                                        }else {
                                            $('#graphTitle').removeClass('error');
                                            is_name = true;
                                            //console.log('name ok');
                                        }
                                    });

                                }
                                else {
                                    errorMsg_no_data("监控项 Chart");
                                }
                            },
                            error: function () {
                                errorMsg_no_connect("监控项 Chart");
                            }
                        });
					},
                    onApprove: function () {
                        if ($('#graphName').val() === '') {
                            $('#graphTitle').addClass('error');
                            is_name = false;
                            //console.log('name empty');
                        }else {
                            $('#graphTitle').removeClass('error');
                            is_name = true;
                            //console.log('name ok');
                        }
                        if (graph_type === '') {
                            $('#graphType').addClass('error');
                            is_type = false;
                            //console.log('type empty');
                        }else {
                            $('#graphType').removeClass('error');
                            is_type = true;//console.log('type ok');
                        }
                        success = is_name && is_type ;
                        if(success) {
                            $('.button.approve').addClass('loading');
                            var dataInfo = {
                                graphName: $('#graphName').val(),
                                graphType: graph_type,
                                itemId: item_id
                            };

                            $.ajax({
                                type: "post",
                                url: "/platformdetail/update_graph",
                                data: JSON.stringify(dataInfo),
                                dataType: "json",
                                contentType : 'application/json',
                                success: function (result) {
                                    if(result.success) {
                                        $('.button.approve').removeClass('loading');
                                        //获取图形
                                        getitemsAccordion(host_ids);
                                        return true;
                                    } else {
                                        $('.button.approve').removeClass('loading');
                                        return true;
                                        errorMsg_no_data("保存失败 Modal");
                                    }
                                },
                                error: function () {
                                    errorMsg_no_connect("监控项 Modal");
                                }
                            });

                        }else {
                            return false;
						}
                    }
                }).modal('show');

            }

            //点击删除图形 function
            function delete_graph(id) {
                var item_id = id.substring(1);
                $('#deleteModal').modal({
                    closable: false,
                    onApprove: function () {
                        $.ajax({
                            type: "get",
                            url: "/platformdetail/del_graph?item_id="+item_id,
                            dataType: "json",
                            success: function (result) {
                                if(result.success) {
                                    /*无效
                                    $("#backDeleteModal").modal({
                                        inverted: true
                                    }).modal('show');
                                    setTimeout("$('#backDeleteModal').modal('hide');",800)*/
                                    //获取图形
                                    getitemsAccordion(host_ids);
                                    console.log('del');
                                }
                                else {
                                    errorMsg_no_data(result.message);
                                }
                            },
                            error: function () {
                                errorMsg_no_connect("监控项 Chart");
                            }
                        });
                    }
                })
                $('#deleteModal').modal('show');
            }

     </script>
	</th:block>
</th:block>
</body>
</html>